<template>
    <div>
        <el-row>
            <el-col :span="8">
                <div id="yard1" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard2" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard3" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div id="yard4" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard5" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard6" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div id="yard7" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard8" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard9" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div id="yard10" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard11" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard12" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div id="yard13" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard14" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard15" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div id="yard16" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard17" style="width: 500px; height: 400px"></div>
            </el-col>
            <el-col :span="8">
                <div id="yard18" style="width: 500px; height: 400px"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "Yard",
        mounted() {
            var chartDom1 = document.getElementById('yard1');
            var myChart1 = echarts.init(chartDom1);
            var option1;

            // prettier-ignore
            const columns1 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows1 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data1
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option1 = {
                title: {
                    text: '普通箱，亚洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns1,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows1,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data1,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 1).then(res => {

                option1.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart1.setOption(option1)
            })

            var chartDom2 = document.getElementById('yard2');
            var myChart2 = echarts.init(chartDom2);
            var option2;

            // prettier-ignore
            const columns2 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows2 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data2
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option2 = {
                title: {
                    text: '普通箱，美洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns2,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows2,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data2,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 2).then(res => {

                option2.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart2.setOption(option2)
            })

            var chartDom3 = document.getElementById('yard3');
            var myChart3 = echarts.init(chartDom3);
            var option3;

            // prettier-ignore
            const columns3 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows3 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data3
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option3 = {
                title: {
                    text: '普通箱，欧洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns3,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows3,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data3,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 3).then(res => {

                option3.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart3.setOption(option3)
            })

            var chartDom4 = document.getElementById('yard4');
            var myChart4 = echarts.init(chartDom4);
            var option4;

            // prettier-ignore
            const columns4 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows4 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data4
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option4 = {
                title: {
                    text: '空箱，亚洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns4,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows4,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data4,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 4).then(res => {

                option4.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart4.setOption(option4)
            })

            var chartDom5 = document.getElementById('yard5');
            var myChart5 = echarts.init(chartDom5);
            var option5;

            // prettier-ignore
            const columns5 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows5 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data5
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option5 = {
                title: {
                    text: '空箱，美洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns5,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows5,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data5,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 5).then(res => {

                option5.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart5.setOption(option5)
            })

            var chartDom6 = document.getElementById('yard6');
            var myChart6 = echarts.init(chartDom6);
            var option6;

            // prettier-ignore
            const columns6 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows6 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data6
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option6 = {
                title: {
                    text: '空箱，欧洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns6,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows6,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data6,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 6).then(res => {

                option6.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart6.setOption(option6)
            })

            var chartDom7 = document.getElementById('yard7');
            var myChart7 = echarts.init(chartDom7);
            var option7;

            // prettier-ignore
            const columns7 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows7 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data7
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option7 = {
                title: {
                    text: '重箱，亚洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns7,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows7,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data7,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 7).then(res => {

                option7.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart7.setOption(option7)
            })

            var chartDom8 = document.getElementById('yard8');
            var myChart8 = echarts.init(chartDom8);
            var option8;

            // prettier-ignore
            const columns8 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows8 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data8
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option8 = {
                title: {
                    text: '重箱，美洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns8,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows8,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data8,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 8).then(res => {

                option8.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart8.setOption(option8)
            })

            var chartDom9 = document.getElementById('yard9');
            var myChart9 = echarts.init(chartDom9);
            var option9;

            // prettier-ignore
            const columns9 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows9 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data9
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option9 = {
                title: {
                    text: '重箱，欧洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns9,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows9,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data9,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 9).then(res => {

                option9.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart9.setOption(option9)
            })

            var chartDom10 = document.getElementById('yard10');
            var myChart10 = echarts.init(chartDom10);
            var option10;

            // prettier-ignore
            const columns10 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows10 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data10
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option10 = {
                title: {
                    text: '冷冻箱，亚洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns10,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows10,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data10,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 10).then(res => {

                option10.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart10.setOption(option10)
            })

            var chartDom11 = document.getElementById('yard11');
            var myChart11 = echarts.init(chartDom11);
            var option11;

            // prettier-ignore
            const columns11 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows11 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data11
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option11 = {
                title: {
                    text: '冷冻箱，美洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns11,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows11,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data11,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 11).then(res => {

                option11.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart11.setOption(option11)
            })

            var chartDom12 = document.getElementById('yard12');
            var myChart12 = echarts.init(chartDom12);
            var option12;

            // prettier-ignore
            const columns12 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows12 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data12
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option12 = {
                title: {
                    text: '冷冻箱，欧洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns12,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows12,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data12,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 12).then(res => {

                option12.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart12.setOption(option12)
            })

            var chartDom13 = document.getElementById('yard13');
            var myChart13 = echarts.init(chartDom13);
            var option13;

            // prettier-ignore
            const columns13 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows13 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data13
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option13 = {
                title: {
                    text: '危险箱，亚洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns13,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows13,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data13,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 13).then(res => {

                option13.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart13.setOption(option13)
            })

            var chartDom14 = document.getElementById('yard14');
            var myChart14 = echarts.init(chartDom14);
            var option14;

            // prettier-ignore
            const columns14 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows14 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data14
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option14 = {
                title: {
                    text: '危险箱，美洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns14,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows14,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data14,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 14).then(res => {

                option14.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart14.setOption(option14)
            })

            var chartDom15 = document.getElementById('yard15');
            var myChart15 = echarts.init(chartDom15);
            var option15;

            // prettier-ignore
            const columns15 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows15 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data15
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option15 = {
                title: {
                    text: '危险箱，欧洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns15,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows15,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data15,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 15).then(res => {

                option15.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart15.setOption(option15)
            })

            var chartDom16 = document.getElementById('yard16');
            var myChart16 = echarts.init(chartDom16);
            var option16;

            // prettier-ignore
            const columns16 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows16 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data16
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option16 = {
                title: {
                    text: '超重箱，亚洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns16,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows16,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data16,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 16).then(res => {

                option16.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart16.setOption(option16)
            })

            var chartDom17 = document.getElementById('yard17');
            var myChart17 = echarts.init(chartDom17);
            var option17;

            // prettier-ignore
            const columns17 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows17 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data17
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option17 = {
                title: {
                    text: '超重箱，美洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns17,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows17,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data17,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 17).then(res => {

                option17.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart17.setOption(option17)
            })

            var chartDom18 = document.getElementById('yard18');
            var myChart18 = echarts.init(chartDom18);
            var option18;

            // prettier-ignore
            const columns18 = [
                '1','2','3','4','5','6'
            ];
            // prettier-ignore
            const rows18 = [
                '1','2','3'
            ];
            // prettier-ignore
            const data18
                = []
                .map(function (item) {
                    return [item[1], item[0], item[2] || '-'];
                });
            option18 = {
                title: {
                    text: '超重箱，欧洲',
                    left: 'center'
                },
                tooltip: {
                    position: 'top'
                },
                grid: {
                    height: '50%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: columns18,
                    splitArea: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'category',
                    data: rows18,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 3,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '15%'
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'heatmap',
                        data: data18,
                        label: {
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            this.request.get("/echarts/yard?yard=" + 18).then(res => {

                option18.series[0].data = [
                    res.data[0],
                    res.data[1],
                    res.data[2],
                    res.data[3],
                    res.data[4],
                    res.data[5],
                    res.data[6],
                    res.data[7],
                    res.data[8],
                    res.data[9],
                    res.data[10],
                    res.data[11],
                    res.data[12],
                    res.data[13],
                    res.data[14],
                    res.data[15],
                    res.data[16],
                    res.data[17],
                ]
                myChart18.setOption(option18)
            })
        }
    }
</script>

<style scoped>

</style>